
<script setup>
import './css/index.css'
import DetailsContent from './module/homePage'
import PersonContent from './module/person '
import WorkContent from './module/work'
import SkillContent from './module/skill'
import ProjectContent from './module/project'
import MyselfContent from './module/myself'


// 缩放
// let t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
let t = 1920 / document.documentElement.clientWidth //改为根据标准1080P缩放  系统的缩放比例也是改变屏幕显示分辨率

if (!!window.ActiveXObject || "ActiveXObject" in window) {
    if (t != 1) {
        // 如果在笔记本中用IE浏览器打开 则弹出提示
        alert('您的设备对显示进行放大导致页面显示不完全,请调整后打开/或用其他浏览器')
    }
} else {
    if (t != 1) {   // 如果进行了缩放，也就是不是1
        let c = document.querySelector('body')
        c.style.zoom = -0.6 * t + 1.55;   // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
    }
}


import { ref,onMounted } from "vue";
// import { ref,reactive,computed,watch,watchEffect,onMounted } from "vue";//各种API导入


onMounted(()=> {
    //setup 是围绕beforeCreate和created生命周期钩子运行的，不需要显式地定义它们。在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。
    //生命周期基本都被重命名 首字母大写后加上on前缀  例如beforeUpdate => onBeforeUpdate

    // 鼠标跟随
    let img = document.querySelector('.img')
    // 定义小图片的旋转角度
    let deg = 0
    // 定义小图片位于网页左侧的位置
    let imgx = 0
    // 定义小图片位于网页顶部的位置
    let imgy = 0
    // 定义小图片x轴的位置
    let imgl = 0
    // 定义小图片y轴的位置
    let imgt = 0
    // 定义小图片翻转的角度
    let y = 0 
    // 定义一个计数器
    let index = 0

    window.addEventListener('mousemove',function(xyz){
        // 获取网页左侧距离的图片位置
        imgx = xyz.x - img.offsetLeft - img.clientWidth /2-30 //避免与鼠标重叠影响mouseover事件
        // 多去网页顶部距离图片的位置
        imgy = xyz.y - img.offsetTop - img.clientHeight /2
        // 套入公式，定义图片的旋转角度
        deg = 360*Math.atan(imgy/imgx)/(2*Math.PI)
        // 每当鼠标移动的时候重置index
        index= 0
        // 定义当前鼠标的位置
        let x = event.clientX
        // 当鼠标的x轴大于图片的时候，提普安就要对着鼠标，所以需要将图片翻转过来
        // 否则就不用翻转
        if(img.offsetLeft<x){
            y=-180
        }else{
            y=0
        }
    })
    setInterval(()=>{
        // 设置小图片的旋转和翻转
        img.style.transform = "rotateZ("+deg+"deg) rotateY("+y+"deg)"
        index++
        // 在这里设置小图片的位置和速度，并判断小图片到达鼠标位置时停止移动
        if(index<50){
            imgl+=imgx/50
            imgt+=imgy/50
        }
        img.style.left = imgl+"px"
        img.style.top = imgt+"px"
    },10)

})

const pageCount = ref(1)  //创建响应式基本类型数据

function changePage(ind) {
    pageCount.value = ind
}

</script>
<template>
    <div class='content'>
        <div class="img"></div>
        <div class="content-left">
            <img src="../../assets/beatingworld.png" alt="" class="content-img">

            <h2>张志聪</h2>
            <h6>个人主页</h6>
            

        <div class="wrapper">
            <div class="button">
                <div class="icon">
                    <svg t="1657186199072"  width="30" height="30" class="icon-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2593" ><path d="M864.930549 169.353453 159.069451 169.353453C107.495953 169.353453 65.541321 211.308084 65.541321 262.881583l0 498.236834c0 51.573499 41.954632 93.52813 93.52813 93.52813l705.861097 0c51.573499 0 93.52813-41.954632 93.52813-93.52813L958.458679 262.881583C958.458679 211.308084 916.504047 169.353453 864.930549 169.353453zM127.859298 285.700809l209.363845 202.712501L127.859298 739.527131 127.859298 285.700809zM635.305686 459.045068c-64.773858 64.773858-171.093035 65.694814-236.992505 1.944239L161.627661 231.67143 862.679324 231.67143 635.305686 459.045068zM384.089537 529.549315c39.396423 27.219346 85.546517 40.82902 131.798941 40.82902 42.466274 0 84.932547-11.563106 122.077746-34.484661l220.926951 256.434896L164.902168 792.32857 384.089537 529.549315zM686.162886 496.292595 896.24303 286.212451l0 453.92865L686.162886 496.292595z" p-id="2594"></path></svg>
                </div>
                <span>
                    1620976401@qq.com
                </span>
            </div>
            <div class="button">
                <div class="icon">
                    <svg t="1657159631857"  width="30" height="30" class="icon-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2259"><path d="M871.673333 770.813333l-165.933333-165.94a53.4 53.4 0 0 0-75.426667 0l-37.713333 37.713334c-21.333333 21.333333-90.413333 0.1-150.846667-60.34S360.046667 452.76 381.413333 431.4l37.713334-37.713333a53.4 53.4 0 0 0 0-75.426667l-165.94-165.933333a53.393333 53.393333 0 0 0-75.42 0l-37.713334 37.713333c-27.866667 27.866667-44.84 64.52-50.46 108.946667-5.213333 41.206667-0.406667 87.42 14.28 137.333333C133.333333 536.586667 199.773333 642 290.9 733.1S487.42 890.666667 587.653333 920.126667c36.926667 10.86 71.813333 16.32 104.146667 16.32a264.333333 264.333333 0 0 0 33.213333-2.04c44.426667-5.62 81.08-22.593333 108.946667-50.46l37.713333-37.713334a53.393333 53.393333 0 0 0 0-75.42z" p-id="2260"></path></svg>
                </div>
                <span>
                    17635668957
                </span>
            </div>
            <div class="button">
                <div class="icon">
                    <svg t="1657186555198"  width="30" height="30" class="icon-svg" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6067"><path d="M365.062518 704 217.862518 704C198.662518 704 173.062518 716.8 166.662518 729.6L6.662517 934.4C-6.137483 947.2 0.262517 960 19.462517 960L1005.062515 960C1024.262515 960 1030.662515 947.2 1017.862515 934.4L857.862515 729.6C845.062515 716.8 825.862515 704 806.662515 704L659.462515 704 608.262518 768 806.662515 768 909.062515 896 115.462518 896 217.862518 768 416.262518 768 365.062518 704 365.062518 704 365.062518 704 365.062518 704Z" p-id="6068"></path><path d="M512.0032 64C371.2032 64 256.0032 179.2 256.0032 320 256.0032 364.8 268.8032 409.6 288.0032 448L448.0032 723.2C486.4032 787.2 544.0032 787.2 576.0032 723.2L723.2032 460.8C748.8032 422.4 768.0032 371.2 768.0032 320 768.0032 179.2 652.8032 64 512.0032 64L512.0032 64ZM672.0032 416 544.0032 646.4C518.4032 691.2 505.6032 691.2 480.0032 646.4L345.6032 409.6C326.4032 384 320.0032 352 320.0032 313.6 320.0032 211.2 403.2032 128 512.0032 128 620.8032 128 704.0032 211.2 704.0032 313.6 704.0032 352 691.2032 384 672.0032 416L672.0032 416Z" p-id="6069"></path></svg>
                </div>
                <span>
                    闵行浦江镇
                </span>
            </div>
        </div>
            
            <div class="content-iconmap"/>
            <div class="content-iconmap"/>
            <div class="content-iconmap"/>
        </div>


        <div class="content-right">
            <DetailsContent v-show="pageCount==1" class=""/>
            <PersonContent v-show="pageCount==2"/>
            <WorkContent v-show="pageCount==3"/>
            <SkillContent v-show="pageCount==4"/>
            <ProjectContent v-show="pageCount==5"/>
            <MyselfContent v-show="pageCount==6"/>
        </div>


        
        <div class="page-sidebar">
        <!--主页 基本资料  工作经验 专业技能 项目经验 教育经历 自我评价 -->
            <el-tooltip content="主页" placement="left">
                <div><svg @click="changePage(1)" t="1656928414619" :class="{ 'content-icon-hover': pageCount==1, 'content-icon':true }" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4929" width="30" height="30"><path d="M762.77551 929.959184H261.22449c-40.75102 0-74.187755-33.436735-74.187755-74.710204v-288.914286c0-6.791837-5.22449-12.016327-11.493878-12.016327h-27.689796c-21.942857 0-40.75102-12.538776-49.110204-32.914285-8.359184-19.853061-3.657143-42.840816 11.493878-58.514286l341.159183-343.771429c15.673469-16.195918 37.616327-25.077551 60.604082-25.077551s44.930612 8.881633 61.126531 25.6L914.285714 463.412245c15.15102 15.673469 19.853061 38.661224 11.493878 58.514286-8.359184 20.37551-27.167347 32.914286-49.110204 32.914285h-27.689796c-6.269388 0-11.493878 5.22449-11.493878 12.016327v288.914286c-0.522449 40.75102-33.959184 74.187755-74.710204 74.187755zM512 135.836735c-12.016327 0-22.987755 4.702041-31.346939 13.061224L139.493878 492.669388c-5.22449 5.22449-3.657143 10.971429-2.612245 13.061224 1.044898 2.089796 3.657143 7.314286 10.971428 7.314286h27.689796c29.257143 0 53.289796 24.032653 53.289796 53.812245v288.914286c0 17.763265 14.628571 32.914286 32.391837 32.914285h501.55102c17.763265 0 32.391837-14.628571 32.391837-32.914285v-288.914286c0-29.779592 24.032653-53.812245 53.289796-53.812245h27.689796c6.791837 0 9.926531-5.22449 10.971428-7.314286 1.044898-2.089796 2.612245-7.836735-2.612245-13.061224L543.346939 148.897959c-8.359184-8.359184-19.330612-13.061224-31.346939-13.061224z" p-id="4930"></path><path d="M663.510204 929.959184H360.489796v-219.428572c0-45.97551 37.616327-83.591837 83.591837-83.591836h135.836734c45.97551 0 83.591837 37.616327 83.591837 83.591836v219.428572z m-261.22449-41.795919h219.428572v-177.632653c0-22.987755-18.808163-41.795918-41.795919-41.795918H444.081633c-22.987755 0-41.795918 18.808163-41.795919 41.795918v177.632653z" p-id="4931"></path></svg></div>
            </el-tooltip>
            <el-tooltip content="基本资料" placement="left">
                <div><svg @click="changePage(2)" t="1656928876679" :class="{ 'content-icon-hover': pageCount==2, 'content-icon':true }" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12797" width="30" height="30"><path d="M995.9424 972.4928C972.3648 742.5792 778.1376 563.2 541.952 563.2l-59.8784 0C245.8624 563.2 51.6096 742.6048 28.032 972.5696 26.5472 976.64 25.6 980.992 25.6 985.6 25.6 1006.7968 42.7776 1024 64 1024S102.4 1006.7968 102.4 985.6c0-4.5056-0.9216-8.7808-2.3552-12.8l6.144 0C131.2768 784.9984 291.7376 640 486.4 640l51.2 0c194.6624 0 355.0976 144.9984 380.2112 332.8l6.144 0C922.5216 976.8192 921.6 981.0944 921.6 985.6c0 21.1968 17.2032 38.4 38.4 38.4s38.4-17.2032 38.4-38.4C998.4 980.9664 997.4528 976.5888 995.9424 972.4928zM512 537.6c141.3888 0 256-114.6368 256-256l0-25.6c0-141.3632-114.6112-256-256-256-141.3888 0-256 114.6368-256 256l0 25.6C256 422.9632 370.6112 537.6 512 537.6zM332.8 256c0-98.9696 80.2304-179.2 179.2-179.2 98.944 0 179.2 80.2304 179.2 179.2l0 25.6c0 98.9696-80.256 179.2-179.2 179.2-98.9696 0-179.2-80.2304-179.2-179.2L332.8 256z" p-id="12798"></path></svg></div>
            </el-tooltip>
            <el-tooltip content="工作经验" placement="left">
                <div><svg @click="changePage(3)" t="1656928537087" :class="{ 'content-icon-hover': pageCount==3, 'content-icon':true }" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7517" width="30" height="30"><path d="M837.12 112.64H161.28c-43.52 0-76.8 35.84-76.8 76.8v468.48c0 43.52 35.84 76.8 76.8 76.8h276.48v156.16H215.04c-15.36 0-25.6 12.8-25.6 25.6 0 15.36 12.8 25.6 25.6 25.6h570.88c15.36 0 25.6-12.8 25.6-25.6 0-15.36-12.8-25.6-25.6-25.6h-243.2v-156.16h294.4c43.52 0 76.8-35.84 76.8-76.8V189.44c2.56-43.52-33.28-76.8-76.8-76.8z m25.6 545.28c0 15.36-12.8 25.6-25.6 25.6H161.28c-15.36 0-25.6-12.8-25.6-25.6V189.44c0-15.36 12.8-25.6 25.6-25.6h675.84c15.36 0 25.6 12.8 25.6 25.6v468.48z m0 0" p-id="7518"></path></svg></div>
            </el-tooltip>
            <el-tooltip content="专业技能" placement="left">
                <div><svg @click="changePage(4)" t="1656928610783" :class="{ 'content-icon-hover': pageCount==4, 'content-icon':true }" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8371" width="30" height="30"><path d="M918 787.978L535.4 923.26l-9.98 4.74h-30.84l-9.98-4.74L102 787.978 78 754.03V231.948L126 198l40 14.144V134.57L217.42 102 510 240.85 802.58 102 854 134.57v77.574L894 198l48 33.948V754.03zM150 282.866V728.57l16 5.658V288.524z m324 20.67l-236-112v534.93l236 112v-534.93z m308 422.93V191.538l-236 112v534.926m324-555.6l-16 5.658v445.706l16-5.658V282.866z m-132 115.4L594.916 466l-0.916-1.932v-77.39l144-68.164v79.752z m0 161L594.916 627l-0.916-1.932v-77.39l144-68.164v79.752z m-314-95.54l-0.916 1.93L280 397.852v-79.838l144 68.236v77.474z m0 161.17l-0.916 1.932L280 559.022v-79.836l144 68.236v77.472z" p-id="8372"></path></svg></div>
            </el-tooltip>
            <el-tooltip content="项目经验" placement="left">
                <div><svg @click="changePage(5)" t="1656928722031" :class="{ 'content-icon-hover': pageCount==5, 'content-icon':true }" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11044" width="30" height="30"><path d="M337.109333 94.748444l-182.499555 760.888889 282.168889 75.605334 182.499555-760.888889-282.168889-75.605334zM359.793778 10.097778l282.168889 75.605333a87.637333 87.637333 0 0 1 61.980444 107.335111l-182.499555 760.888889a87.637333 87.637333 0 0 1-107.335112 61.966222l-282.168888-75.605333a87.637333 87.637333 0 0 1-61.980445-107.335111l182.499556-760.888889A87.637333 87.637333 0 0 1 359.793778 10.097778z" p-id="11045"></path><path d="M375.381333 346.951111l84.650667 22.684445a43.818667 43.818667 0 0 0 22.684444-84.650667l-84.650666-22.684445a43.818667 43.818667 0 0 0-22.684445 84.650667zM337.578667 488.049778l84.650666 22.670222a43.818667 43.818667 0 0 0 22.684445-84.650667l-84.650667-22.684444a43.818667 43.818667 0 0 0-22.684444 84.664889zM744.547556 161.436444v817.976889a29.212444 29.212444 0 1 0 58.424888 0V161.422222a29.212444 29.212444 0 0 0-58.424888 0zM861.411556 161.436444v817.976889a14.606222 14.606222 0 1 0 29.212444 0V161.422222a14.606222 14.606222 0 1 0-29.212444 0zM919.836444 161.436444v817.976889a14.606222 14.606222 0 1 0 29.212445 0V161.422222a14.606222 14.606222 0 1 0-29.212445 0z" p-id="11046"></path></svg></div>
            </el-tooltip>
            <el-tooltip content="自我评价" placement="left">
                <div><svg @click="changePage(6)" t="1656928757711" :class="{ 'content-icon-hover': pageCount==6, 'content-icon':true }" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11702" width="30" height="30"><path d="M512 890.026667c-8.106667 0-16.426667-3.2-22.613333-9.386667l-103.68-103.68h-128a117.546667 117.546667 0 0 1-117.333334-117.333333V251.306667c0-64.64 52.693333-117.333333 117.333334-117.333334h508.373333c64.64 0 117.333333 52.693333 117.333333 117.333334v408.533333c0 64.64-52.693333 117.333333-117.333333 117.333333h-128l-103.68 103.68c-5.973333 6.186667-14.293333 9.173333-22.4 9.173334zM257.706667 197.973333a53.333333 53.333333 0 0 0-53.333334 53.333334v408.533333a53.333333 53.333333 0 0 0 53.333334 53.333333h141.226666c8.533333 0 16.64 3.413333 22.613334 9.386667L512 812.8l90.453333-90.453333c5.973333-5.973333 14.08-9.386667 22.613334-9.386667h141.226666a53.333333 53.333333 0 0 0 53.333334-53.333333V251.306667a53.333333 53.333333 0 0 0-53.333334-53.333334H257.706667z" p-id="11703"></path><path d="M512 652.8c-62.506667 0-125.013333-23.893333-172.586667-71.466667-12.586667-12.586667-12.586667-32.853333 0-45.226666s32.853333-12.586667 45.226667 0c70.186667 70.186667 184.533333 70.186667 254.933333 0 12.586667-12.586667 32.853333-12.586667 45.226667 0s12.586667 32.853333 0 45.226666A243.392 243.392 0 0 1 512 652.8z"  p-id="11704"></path></svg></div>
            </el-tooltip>
        </div>
        
        <div class="page-sidebar-page">
            <svg t="1656932469079" @click="()=>{pageCount==6?pageCount=1:pageCount++}" class="content-icon-pagenext" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2240" width="35" height="35"><path d="M709.845333 250.346667a22.4 22.4 0 0 1 0.533334-30.848 20.48 20.48 0 0 1 29.717333 0.64l272.426667 292.693333-272.426667 292.650667a20.458667 20.458667 0 0 1-29.717333 0.64c-8.32-8.32-8.746667-21.973333-0.533334-30.848l242.346667-262.464-242.346667-262.464z"  p-id="2241"></path></svg>
            <div class="content-icon-pageblock"></div>
            <svg t="1656932475817" @click="()=>{pageCount==1?pageCount=6:pageCount--}" class="content-icon-pageback"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2380" width="30" height="30"><path d="M387.84 164.906667a22.122667 22.122667 0 0 0-0.362667-30.72 20.522667 20.522667 0 0 0-29.674666 0.362666L0 512.853333l357.802667 378.282667c8.042667 8.533333 21.290667 8.746667 29.674666 0.341333 8.32-8.32 8.533333-22.016 0.384-30.72L60.330667 512.853333 387.861333 164.906667z" p-id="2381"></path></svg>
        </div>

    </div>
</template>
<style lang="scss"  scoped>
.img{
    width: 20px;
    height: 20px;
    position: absolute;
    background-image: url('../../assets/goat.gif');
    background-size: cover;
}
.content{
  background:linear-gradient(to bottom,#20e0af,#09afe9);
  width:1600px;
  height: 700px;
  margin:110px 100px;
  border-radius:20px;
  box-shadow: 20px 20px 20px #d7dadb;	
  .content-left{
      float: left;
      width: 400px;
      height: 700px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      .content-img{
        //   position: relative;
        //   top: -100px;
          width: 200px;
          height: 200px;
          border-radius:200px;
          margin: 20px 0;
      }
      h2{
          margin:10px 0;
      }
      h6{
          margin-bottom:20px;
      }
      .content-icon{
          width: 1em; 
          height: 1em; 
          margin-right: 8px
      }
      .content-iconmap{
          height: 20px;
      }
  }
  .content-right{
    z-index: 9;
  }

  
  .page-sidebar{
    cursor:pointer;

    position: relative;
    z-index: 9;
    top: -700px;
    left: 1700px;
    box-shadow: 0px 20px 20px #d7dadb;	

    width: 40px;
    height: 320px;
    border-radius:20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .content-icon{
        margin:5px 0;
        font-size: 30px;
    }
    .content-icon:hover{
      width: 35px;
      height: 35px;
      fill:currentColor;
      color: #14c7cc !important;
    }
    .content-icon-hover{
      fill:currentColor;
      color: #14c7cc !important;
    }
  }
  .page-sidebar-page{
    cursor:pointer;
    position: relative;
    z-index: 9;
    top: -420px;
    left: 1700px;
    box-shadow: 20px 20px 20px #d7dadb;	

    width: 40px;
    height: 100px;
    border-radius:20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .content-icon-pageback{
        position: relative;
        left: 9px;
    }
    .content-icon-pageback:hover{
      fill:currentColor;
      color: #14c7cc !important;
    }
    .content-icon-pageblock{
        height: 10px;
        width: 10px;
    }
    .content-icon-pagenext{
        position: relative;
        left: -9px;
    }
    .content-icon-pagenext:hover{
      fill:currentColor;
      color: #14c7cc !important;
    }
  }
}
</style>